<template>
	<view class="team-list">
		<view class="listBox">
			<view class="listItem" v-for="item in userList">
				<view class="nameStyle">ID:{{item.id}}</view>
				<view class="left">{{item.userName}}</view>
				<view class="right no-recharged" :class="item.recharged =='1'?'recharged':'no-recharged'">
					{{item.recharged =='1'?$t('home.team.recharged'):$t('home.team.noRecharged')}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTeamDetail
	} from "@/api/system/user.js"

	export default {
		data() {
			return {
				userList: []
			};
		},
		onLoad(option) {
			var type = option.type;
			console.log('type:' + type)
			if (type == 1) {

				uni.setNavigationBarTitle({
					title: this.$t('home.team.oneLevel')
				});
			} else if (type == 2) {
				uni.setNavigationBarTitle({
					title: this.$t('home.team.twoLevel')
				});
			} else if (type == 3) {
				uni.setNavigationBarTitle({
					title: this.$t('home.team.thirdLevel')
				});
			};


			getTeamDetail(type).then(rsp => {
				if (rsp.code == 200) {
					this.userList = rsp.data;
				}
			})

		}

	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;
		color: white;
	}

	.team-list {

		margin: 10px 12px 12px 12px;

		.listBox {
			box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
			border-radius: 10px;

			.listItem {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #e6e6e6;
				padding: 12px 20px;
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;

				.no-recharged {
					color: $uni-color-subfont;
				}

				.recharged {
					color: $uni-color-primary;
				}


			}
		}


	}
</style>